<template>
	<view class="main">
		<view id="top-form" class="top-form">
			<u--form :model="form" ref="uForm" class="from" :rules="rules">
				<view class="top-role">
					<u-form-item label="手机号" labelWidth="80" prop="mobile" required :borderBottom="true">
						<u-input v-model="form.mobile" type="text" inputAlign="right" placeholder="请输入手机号"
							:maxlength="11" border="none" clearable :disabled="disabledBoolean" disabledColor="#fff" />
					</u-form-item>
					<u-form-item label="姓名" labelWidth="80" prop="name" required :borderBottom="true">
						<u-input v-model="form.name" type="text" inputAlign="right" placeholder="请输入姓名" :maxlength="12"
							border="none" clearable />
					</u-form-item>
					<u-form-item v-if="!form.userId" label="登录密码" labelWidth="80" prop="password" required
						:borderBottom="true">
						<u-input v-model="form.password" type="password" inputAlign="right" placeholder="请输入登录密码"
							:maxlength="12" border="none" clearable />
					</u-form-item>
					<u-form-item label="授权场地" labelWidth="80" prop="storeName" required @click="storeShow">
						<view class="u-flex u-row-flex-end">
							<view>已分配</view>
							<view class="auth-quantity">{{authorizedQuantity}}</view>
							<view>个场地</view>
						</view>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<view class="add-all-permissions">
						<view class="all-permissions-box">
							<text class="all-permissions-text">新增场地自动授权</text>
							<u-icon @click="autoAuth" name="question-circle"></u-icon>
						</view>
						<u-switch v-model="form.newStoreAutoAuthorization" activeColor="#6072FF"></u-switch>
					</view>
				</view>
			</u--form>
		</view>
		<view class="body">
			<view id="role-operation-container">
				<view class="character-selection">
					<text>角色权限</text>
					<view class="u-flex-center" @click="roleListShow = !roleListShow">
						<u--input disabled disabledColor="#ffffff" inputAlign="right" v-model="name" placeholder="请选择角色"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</view>
				</view>
				<view id="all-permissions">
					<view class="end-container">
						<view v-for="(item,index) in tabList" :key="index" class="end-box" @click="tabSelect(index)">
							<image :src="item.src" class="end-img" :class="tabIndex === index ? 'end-img-select' : ''">
							</image>
							<text class="end-title"
								:class="tabIndex === index ? 'end-title-select' : ''">{{item.name}}</text>
						</view>
					</view>
					<view class="all-permissions">
						<view class="p-num u-flex-row u-row-between u-m-r-30">
							<view>已开启{{ count }}项权限</view>
							<view>开启所有权限</view>
						</view>
						<u-switch @change="changeAllNewField" v-model="allChildNewField"
							activeColor="#6072FF"></u-switch>
					</view>
				</view>
			</view>
			<scroll-view :style="{ height: height + 'px' }" scroll-y="true" :scroll-with-animation="true"
				:enable-back-to-top="true" @scrolltolower="reachBottom">

				<view class="permission-module" v-for="(item, index) in pcList" :key="index"
					v-if="permissionPlatformTypeEnum.PC_WEB_PAGE == tabList[tabIndex].platformType">
					<view class="module-title">
						<view class="u-p-r-15">{{item.titleSimplify}}</view>
						<u-switch size="20" @change="changeOneNewField($event, item)" v-model="item.newField"
							activeColor="#6072FF"></u-switch>
					</view>
					<view>
						<view class="permission-set">
							<view class="permission-box" v-for="(data,ind) in item.childAPIList" :key="ind">
								<text class="u-p-r-10">{{data.titleSimplify}}</text>
								<u-switch @change="changeOneNewField($event, data)" size="20" v-model="data.newField"
									activeColor="#6072FF"></u-switch>
							</view>
						</view>
						<view class="permission-second">
							<view class="second-box" v-for="(secondData, indexSecond) in item.secondStageList"
								:key="indexSecond">
								<view class="u-flex-row">
									<text class="u-p-r-10">{{secondData.titleSimplify}}</text>
									<u-switch size="20" @change="changeOneNewField($event, secondData)"
										v-model="secondData.newField" activeColor="#6072FF"></u-switch>
								</view>
								<view class="second-box-2"
									v-for="(secondChildData,secondChildInd) in secondData.childAPIList"
									:key="secondChildInd">
									<text class="u-p-r-10">{{secondChildData.titleSimplify}}</text>
									<u-switch @change="changeOneNewField($event, secondChildData)" size="20"
										v-model="secondChildData.newField" activeColor="#6072FF"></u-switch>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="permission-module" v-for="(item, index) in appletList" :key="index"
					v-if="permissionPlatformTypeEnum.MERCHANT_APPLET == tabList[tabIndex].platformType">
					<view class="module-title">
						<view class="u-p-r-15">{{item.titleSimplify}}</view>
						<u-switch size="20" @change="changeOneNewField($event, item)" v-model="item.newField"
							activeColor="#6072FF"></u-switch>
					</view>
					<view>
						<view class="permission-set">
							<view class="permission-box" v-for="(data,ind) in item.childAPIList" :key="ind">
								<text class="u-p-r-10">{{data.titleSimplify}}</text>
								<u-switch @change="changeOneNewField($event, data)" size="20" v-model="data.newField"
									activeColor="#6072FF"></u-switch>
							</view>
						</view>
						<view class="permission-second">
							<view class="second-box" v-for="(secondData, indexSecond) in item.secondStageList"
								:key="indexSecond">
								<view class="u-flex-row">
									<text class="u-p-r-10">{{secondData.titleSimplify}}</text>
									<u-switch size="20" @change="changeOneNewField($event, secondData)"
										v-model="secondData.newField" activeColor="#6072FF"></u-switch>
								</view>
								<view class="second-box-2"
									v-for="(secondChildData,secondChildInd) in secondData.childAPIList"
									:key="secondChildInd">
									<text class="u-p-r-10">{{secondChildData.titleSimplify}}</text>
									<u-switch @change="changeOneNewField($event, secondChildData)" size="20"
										v-model="secondChildData.newField" activeColor="#6072FF"></u-switch>
								</view>
							</view>
						</view>
					</view>
				</view>

			</scroll-view>
		</view>
		<view class="footer" id="footer">
			<view class="btn u-m-t-10">
				<u-button type="primary" :customStyle="{height: '88rpx'}" shape="circle" @click="save()">保存</u-button>
			</view>
		</view>
		<!-- 角色 -->
		<u-picker :show="roleListShow" :columns="roleList" keyName="name" confirmColor="#6072FF"
			@confirm="roleConfirm($event)" @cancel="roleListShow=false" @close="roleListShow=false"
			:closeOnClickOverlay="true" :defaultIndex="[pDefaultIndex]">
		</u-picker>
		<u-popup :show="show" :round="10" mode="bottom" @open="storeShow" :safeAreaInsetBottom="true">
			<view class="popup">
				<view class="u-flex u-row-between popup-header">
					<view @click="hidePopup()">取消</view>
					<view class="popup-comfirm" @click="confirm">确定{{storeCount}}个</view>
				</view>
				<view class="u-m-b-20">
					<u-search placeholder="请输入场地名称" v-model="keyword" @clear="clearStr" @change="searchStoreName"
						@custom="clearStr" action-text="清空" :actionStyle="actionStyle">
					</u-search>
				</view>
				<view class="allCheck">
					<u-checkbox-group @change="checkAllBoxChange()" iconPlacement="right" placement="column">
						<u-checkbox :checked="checkAll" activeColor="#6072FF" label="全选" shape="circle" size="20"
							name="all"></u-checkbox>
					</u-checkbox-group>
				</view>
				<u-checkbox-group iconPlacement="right" placement="column" v-model="checkboxValue"
					@change="checkboxSubChange">
					<u-gap height="2" bgColor="#f2f3f5;"></u-gap>
					<scroll-view :style="{height: scrollHeight+'rpx'}" scroll-y="true" :scroll-with-animation="true"
						:enable-back-to-top="true">
						<view class="u-p-t-20 u-p-b-20">
							<u-checkbox v-for="(item,index) in userStoreListSearch" :key="index" :name="item.storeId"
								:label="item.storeName" :customStyle="{marginTop:20+'rpx'}" shape="circle" size="20"
								activeColor="#6072FF"></u-checkbox>
						</view>
					</scroll-view>
				</u-checkbox-group>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userStoreListSearch: [],
				checkboxValue: [],
				height: 0,
				storeCount: 0,
				scrollHeight: 330,
				name: '',
				keyword: '',
				checkAll: false,
				pcList: [],
				appletList: [],
				deskList: [],
				handList: [],
				roleListShow: false,
				disabledBoolean: false,
				show: false,
				roleList: [
					[]
				],
				pDefaultIndex: 0,
				form: {
					userId: '',
					mobile: '',
					roleId: '',
					password: '',
					name: '',
					newStoreAutoAuthorization: false,
					storeIdArray: [],
				},
				staticFileUrl: this.$configPath.staticFileUrl,
				tabIndex: 0,
				status: 'loadmore',
				count: 0,
				allChildNewField: false,
				actionStyle: {
					color: 'rgba(0,0,0,.8)',
					borderRadius: '100px',
					padding: '5px',
				},
				tabList: [{
					name: '小程序后台',
					src: this.$configPath.staticFileUrl + '/image/account/miniPrograms.svg',
					platformType: this.$permissionPlatformTypeEnum.MERCHANT_APPLET,
				}, {
					name: '网页后台',
					src: this.$configPath.staticFileUrl + '/image/account/pc.svg',
					platformType: this.$permissionPlatformTypeEnum.PC_WEB_PAGE,
				} ],
				params: {
					pageNum: 1,
					pageSize: 10,
					pages: 1,
				},
				rules: {
					'mobile': {
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					'name': {
						type: 'string',
						required: true,
						message: '请输入名称',
					},
				},
				permissionPlatformTypeEnum: this.$permissionPlatformTypeEnum,
				authorizedQuantity: 0,
			}
		},
		onLoad(options) {
			this.findAllocationStore();
			let title = '';
			if (options.userId) {
				this.form.userId = options.userId;
				if (options.roleId) {
					this.form.roleId = options.roleId;
				}
				this.disabledBoolean = true
				title = '子账号-编辑';

				//查询账号
				this.finOneRoleUserByUserId();
			} else {
				title = '子账号-添加';

				this.rules.password = {
					type: 'string',
					required: true,
					message: '请输入登录密码',
					trigger: ['blur', 'change']
				}
				this.findRoleByUserIdList();
				this.findPermissionList()
			}
			uni.setNavigationBarTitle({
				title: title
			})
		},
		onUnload() {
			let pages = getCurrentPages(); //获取所有页面栈实例列表
			let prevPage = pages[pages.length - 2]; //上一页页面实例
			if (prevPage) {
				prevPage.$vm.initSubAccount(false);
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			this.getPomHeight();
		},
		methods: {
			//导航切换
			tabSelect(index) {
				if (this.tabIndex != index) {
					this.allChildNewField = false;
				}
				this.tabIndex = index;
				this.changeChildNewField();
			},
			//确定
			confirm() {
				this.show = false;
				this.storeNameShow(this.storeCount);
			},
			//清空关键字
			clearStr() {
				this.keyword = '';
				this.checkboxValue = [];
				this.checkAll = false;
				this.storeCount = 0;
			},
			hidePopup() {
				// console.log('进入了吗')
				this.show = false;
			},
			//全选
			checkAllBoxChange(e) {
				// console.log('change2', e);
				/* 判断是否全选 */
				if (e == "all") {
					this.checkboxValue = []
					this.userStoreListSearch.map((item, index) => {
						item.status = true;
						this.checkboxValue.push(item.storeId)
					})
					this.checkAll = true
					// console.log(this.checkboxValue)
				} else {
					this.userStoreListSearch.map((item, index) => {
						item.status = false;
					})
					this.checkboxValue = []
					this.checkAll = false
				}

				this.storeCount = 0
				this.userStoreList.forEach(res => {
					if (res.status) {
						this.storeCount++;
					}
				})
				this.storeNameShow(this.storeCount);
			},

			//根据关键字查询店铺名
			searchStoreName() {
				this.userStoreListSearch = []
				this.storeCount = 0
				this.checkboxValue = []
				this.userStoreList.forEach(res => {
					if (res.storeName.indexOf(this.keyword) > -1) {
						this.userStoreListSearch.push(res)
					}
				})
			},

			//多选
			checkboxSubChange(e) {
				this.checkboxValue = e
				this.userStoreListSearch.forEach((item, index) => {
					if (item.storeId == this.checkboxValue[index]) {
						item.status = true;
					} else {
						item.status = false
					}
				})
				// console.log(this.userStoreListSearch,"this.userStoreList")
				/* 判断是否全选中*/
				if (this.checkboxValue.length === this.userStoreListSearch.length) {
					// console.log("进入了吗")
					this.checkAll = true
				} else {
					this.checkAll = false
				}

				this.storeCount = this.checkboxValue.length
				this.storeNameShow(this.storeCount);
			},
			storeNameShow(number) {
				this.authorizedQuantity = number;
			},
			//查询所有场地
			findAllocationStore() {
				let body = {
					storeName: this.keyword
				}
				this.$api('userStore.findAllocationStore', body).then(res => {
					if (res.status == 0) {
						this.storeCount = 0
						this.userStoreList = res.data;
						// console.log(this.userStoreList,"kankan")
						if (this.userStoreList != null) {
							for (let i = 0; i < this.userStoreList.length; i++) {
								if (this.userStoreList[i].status) {
									this.storeCount++;
								}
								this.userStoreListSearch.push(this.userStoreList[i])
							}
						}
					} else {
						this.$helpers.toast('请求数据失败:' + res.msg);
					}
				})
			},
			storeShow() {
				this.show = true;
			},
			//数据回响
			finOneRoleUserByUserId() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.$api('user.finOneUserAndRoleUserByUserId', this.form).then(res => {
					if (res.status == 0) {
						uni.hideLoading();
						this.form.userId = res.data.id
						this.form.name = res.data.name
						this.form.mobile = res.data.mobile
						this.form.password = res.data.password
						this.form.userRoleId = res.data.userRoleId
						this.form.newStoreAutoAuthorization = res.data.newStoreAutoAuthorization
						if (res.data.userAttributeList.length > 0) {
							let list = res.data.userAttributeList;
							this.storeCount = list.length;
							this.storeNameShow(this.storeCount);
							list.map((item) => {
								this.checkboxValue.push(item.merchantStoreId)
							})
							if (this.checkboxValue.length == this.userStoreListSearch.length) {
								this.checkAll = true
							}
						}
						this.$forceUpdate()
						this.findRoleByUserIdList();
						this.findPermissionList()
					} else {
						uni.hideLoading();
						this.$helpers.toast('请求数据失败:' + res.msg);
					}
				}).catch(() => {
					uni.hideLoading();
				});
			},
			//保存数据
			save() {
				try {
					this.$refs.uForm.validate().then(res => {
						if (this.checkboxValue.length == 0) {
							this.$helpers.toast('请选择门店最少一个');
							this.storeShow();
							return;
						}
						if (this.$u.test.isEmpty(this.form.roleId)) {
							// 判断 roleList 内部的数组是否为空
							const isEmpty = this.roleList.length === 1 && this.roleList[0].length === 0;
							if (isEmpty) {
								this.navAddRole();
							} else {
								this.roleListShow = true;
							}
							return;
						}

						let checkedPermissionIdArray = new Array;
						let array = this.pcList.concat(this.appletList).concat(this.deskList).concat(this
						.handList);
						array.flatMap(item => [
							item,
							...(item.childAPIList || []),
							...(item.secondStageList || []),
							...this.flattenLists(item.secondStageList || [])
						]).reduce((acc, data) => {
							if (data.id && data.newField) {
								checkedPermissionIdArray.push(data.id)
							}
						}, 0);

						this.form.permissionIdList = checkedPermissionIdArray;
						this.form.storeIdArray = this.checkboxValue

						uni.showLoading({
							title: '保存中...',
							mask: true
						});
						this.$api('user.editUserRolePermission', this.form).then(res => {
							if (res.status == 0) {
								uni.hideLoading();
								this.$helpers.toast('保存成功', 'success', 2000, true, () => {
									uni.navigateBack()
								});
							} else {
								uni.hideLoading();
								getApp().err("保存失败：" + res.msg)
							}
						})
					}).catch(error => {
						console.error("e", error)
						uni.hideLoading();
						getApp().err('请按红色文字提示输入完整信息才能进行保存', error)
					})
				} catch (e) {
					console.error(e.toString())
					getApp().err('保存失败：' + e.toString())
					uni.hideLoading();
				}
			},
			//添加角色
			navAddRole() {
				uni.showModal({
					title: '还未有创建过角色，是否前往创建？',
					cancelText: '取消',
					confirmText: '确认',
					showCancel: true,
					success(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages-my/sub-account-v2/role-management/role-management?flog=' +
									true
							});
						}
					}
				});
			},
			//确认角色
			roleConfirm(e) {
				this.name = e.value[0].name
				this.form.roleId = e.value[0].id
				this.roleListShow = false;
				this.roleEchoSwitch();
			},

			//根据角色回显开关
			roleEchoSwitch() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				let params = {
					roleId: this.form.roleId,
					pcPermissionList: this.pcList,
					appletPermissionList: this.appletList,
					deskPermissionList: this.deskList,
					handPermissionList: this.handList,
				}
				this.$api('permission.roleEchoSwitch', params).then(res => {
					if (res.status == 0) {
						uni.hideLoading();
						this.pcList = res.data.pcPermissionList;
						this.appletList = res.data.appletPermissionList;
						this.deskList = res.data.deskPermissionList;
						this.handList = res.data.handPermissionList;

						if (this.pcList.length > 0 || this.appletList.length > 0 || this.deskList.length > 0 ||
							this.handList.length > 0) {
							this.changeChildNewField()
						} else {
							this.count = 0
							this.allChildNewField = false
						}
					} else {
						uni.hideLoading();
						this.$helpers.toast('请求数据失败:' + res.msg);
					}
				}).catch(() => {
					uni.hideLoading();
				});
			},

			// 统计开启数量
			statsNewField() {
				this.count = this.arrayByType().flatMap(item => [
					item,
					...(item.childAPIList || []),
					...(item.secondStageList || []),
					...this.flattenLists(item.secondStageList || [])
				]).reduce((acc, data) => {
					// console.log("data", data.titleSimplify)
					if (data.id && data.newField) {
						return acc + 1;
					} else {
						return acc + 0;
					}
				}, 0);
				console.log("this.count", this.count)
			},

			flattenLists(list) {
				return list.reduce((acc, item) => {
					if (Array.isArray(item.childAPIList)) {
						return acc.concat(item.childAPIList);
					} else {
						return acc.concat([]);
					}
				}, []);
			},

			//单个开关事件
			changeChildNewField() {
				this.statsNewField()
			},
			//开启，开关的数量
			switchSwitch() {
				this.statsNewField()
			},

			arrayByType() {
				if (this.tabList[this.tabIndex].platformType == this.permissionPlatformTypeEnum.PC_WEB_PAGE) {
					return this.pcList;
				} else if (this.tabList[this.tabIndex].platformType == this.permissionPlatformTypeEnum.MERCHANT_APPLET) {
					return this.appletList;
				}
				return [];
			},

			//开启所有权限
			changeAllNewField(e) {
				this.allChildNewField = e
				this.newFieldTreeReload(this.arrayByType(), e);
			},

			// 单个开或关
			changeOneNewField(e, item) {

				// 本节点和下级（n层）节点
				this.newFieldTreeReload(item.childAPIList, e);
				this.newFieldTreeReload(item.secondStageList, e);
			},

			// 开启或关闭
			newFieldTreeReload(array, onOroff) {
				// console.log("array:", array)
				if (Array.isArray(array) && array.length > 0) {
					array.flatMap(item => [
						item,
						...(item.childAPIList || []),
						...(item.secondStageList || []),
						...this.flattenLists(item.secondStageList || [])
					]).reduce((acc, data) => {
						console.log("data", data.titleSimplify)
						data.newField = onOroff;
					}, 0);
				}

				this.statsNewField();
			},

			// 查询菜单权限
			findPermissionList() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				let params = {
					subUserId: this.form.userId
				}
				this.$api('permission.findPermissionList', params).then(res => {
					if (res.status == 0) {
						uni.hideLoading();
						this.appletList = res.data.appletList
						this.pcList = res.data.pcList
						this.deskList = res.data.deskList
						this.handList = res.data.handList
						if (this.pcList.length > 0 || this.appletList.length > 0 || this.deskList.length > 0 ||
							this.handList.length > 0) {
							this.changeChildNewField()
						} else {
							this.count = 0
							this.allnewField = false
						}
					} else {
						uni.hideLoading();
						this.$helpers.toast('请求数据失败:' + res.msg);
					}
				}).catch(() => {
					uni.hideLoading();
				});
			},
			//查询角色
			findRoleByUserIdList() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.roleList[0].length = 0
				this.$api('role.findRoleByUserIdList').then(res => {
					if (res.status == 0) {
						uni.hideLoading();
						for (let r of res.data) {
							this.roleList[0].push({
								id: r.id,
								name: r.name
							})

							if (this.form.roleId && this.form.roleId == r.id) {
								this.pDefaultIndex = this.roleList.length - 1;
								this.name = r.name;
							}
						}
					} else {
						uni.hideLoading();
						this.$helpers.toast('请求数据失败:' + res.msg);
					}
				}).catch(() => {
					uni.hideLoading();
				});
			},
			//加载更多
			reachBottom() {
				if (this.status == 'nomore') {
					return;
				}
				this.status = 'loading';
				this.params.pageNum++;
			},
			autoAuth() {
				this.$helpers.toast('开启后新增的场地将会自动授权');

			},
			// 获取各个盒子的高度
			getPomHeight() {
				let query = wx.createSelectorQuery().in(this)
				query.select('#top-form').boundingClientRect()
				query.select('#role-operation-container').boundingClientRect()
				query.select('#footer').boundingClientRect()
				query.exec(res => {
					let windowHeight = wx.getSystemInfoSync().windowHeight
					this.height = windowHeight - 20
					for (let i = 0; i < res.length; i++) {
						this.height -= res[i].height;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.main {}

	.popup {
		padding: 0 30rpx;

		.popup-header {
			padding: 20rpx 0rpx;
			font-size: $f-base;

			.popup-comfirm {
				color: $u-primary;
			}

			.allCheck {
				margin: 30rpx;
			}
		}
	}

	.footer {
		z-index: 99;
		border-top: 1px solid #fafafa;
		width: 100%;
		height: 166rpx;
		background-color: white;
		position: fixed;
		bottom: 0rpx;

		.btn {
			padding: $u-padding-medium;
		}
	}

	.body {
		margin-top: 30rpx;
		background-color: #FFF;
		padding: 20rpx 30rpx;
	}

	.character-selection {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 20rpx;
		color: rgba(0, 0, 0, 0.8);
		font-size: 28rpx;
	}

	.all-permissions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		color: rgba(0, 0, 0, 0.7);
		font-size: 28rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

		.p-num {
			width: 100%;
		}
	}

	.permission-module {
		padding: 30rpx 0;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		color: rgba(0, 0, 0, 0.7);

		.module-title {
			font-size: 28rpx;
			display: flex;
		}

		.permission-set {
			width: 100%;
			font-size: 24rpx;
			margin-left: 150rpx;

			.permission-box {
				display: flex;
				align-items: center;
				margin: 20rpx 0;
			}
		}

		.permission-second {
			font-size: 24rpx;
			width: 85%;
			margin-left: 60rpx;

			.second-box {
				margin: 20rpx 0;

				.second-box-2 {
					display: flex;
					flex-direction: row;
					margin: 20rpx 0;
					margin-left: 60rpx;
				}
			}
		}
	}

	.end-container {
		display: flex;
		align-items: self-start;
		justify-content: space-between;
		font-size: 28rpx;

		.end-box {
			display: flex;
			align-items: center;

			.end-title {}

			.end-img-select {
				padding-bottom: 25rpx;
			}

			.end-title-select {
				font-weight: bold;
				padding-bottom: 15rpx;
				border-bottom: 10rpx solid #6072FF;
			}

			.end-img {
				width: 27rpx;
				height: 27rpx;
				margin-right: 6rpx;
			}
		}
	}

	.top-form {
		background-color: #FFF;
		padding: 0 30rpx 0 25rpx;

		.add-all-permissions {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 10rpx;

			.all-permissions-box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.all-permissions-text {
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.7);
					margin-right: 10rpx;
				}
			}
		}

		.auth-quantity {
			color: #6072FF;
			margin: 0 20rpx;
		}
	}
</style>